<template>
  <el-row class="cardrow" :gutter="20">
    <el-col :span="6">
      <div class="card col1">
        <span>总量：</span>
        <numberGrow
          class="number"
          :time="page.nubtime"
          :value="data.allCount"
        ></numberGrow>
        <i class="el-icon-s-grid"></i>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="card col2">
        <span>在库：</span>
        <numberGrow
          class="number"
          :time="page.nubtime"
          :value="data.allCount"
        ></numberGrow>
        <i class="el-icon-box"></i>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="card col3">
        <span>维修：</span>
        <numberGrow
          class="number"
          :time="page.nubtime"
          :value="data.allCount"
        ></numberGrow>
        <i class="el-icon-coin"></i>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="card col4">
        <span>使用：</span>
        <numberGrow
          class="number"
          :time="page.nubtime"
          :value="data.allCount"
        ></numberGrow>
        <i class="el-icon-coin"></i>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      page: {
        nubtime: 0.8
      },
      data: {
        allCount: 200
      }
    };
  },
  //外部属性
  props: {},
  //内部方法
  methods: {
    initPage() {
      setTimeout(() => {
        this.data.allCount = 400;
      }, 2000);
    }
  },
  //组件
  components: {},
  //初始化 异步加async await
  mounted() {
    this.initPage();
  },
  //计算属性
  computed: {},
  //监视
  watch: {}
};
</script>

<style lang="scss" scoped>
.cardrow {
}
.card {
  $height: 130px;
  height: $height;
  display: flex;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 0px 20px 0px 20px;
  .number {
    flex: 5;
    line-height: $height;
    text-align: right;
    /deep/ span {
      color: #fff;
      font-size: 50px;
    }
  }
  // 文字和图标
  span,
  i {
    color: #fff;
    // flex: 2;
    font-size: 30px;
    line-height: $height;
  }
  // 图标
  i {
    font-size: 50px;
    padding-left: 30px;
  }
}
.col1 {
  background-color: #409eff;
}
.col2 {
  background-color: #67c23a;
}
.col3 {
  background-color: #e6a23c;
}
.col4 {
  background-color: #f56c6c;
}
.number {
}
</style>
